<script lang="ts" setup>
import {message} from 'ant-design-vue'
import {sendCode} from '~/api/notify'
import {register} from '~/api/account'

const {changeToFinish} = $(useModel())

const {registerCurrent} = defineProps<{
    registerCurrent: { phone: string, code: string, captcha: string, accept: boolean }
}>()

// 图形验证码获取
let captchaSrc = $ref(`${baseUrl}/notify/v1/captcha?type=register&time=${Date.now()}`)
// 更新图形验证码
const resetCaptchaSrc = () => {
    if (captchaSrc.includes('&time')) {
        captchaSrc = captchaSrc.replace(/&time=[0-9]*/, '&time=' + Date.now())
    }
}

// 获取手机验证码
const getCode = async () => {
    // 手机号校验
    if (registerCurrent.phone) {
        const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (!phoneReg.test(registerCurrent.phone)) {
            message.warn('手机号码不合规')
            return
        }
    } else {
        message.warn('请输入手机号码')
        return
    }

    // 图形验证码
    if (!registerCurrent.captcha) {
        message.warn('请输入图形验证码')
        return
    }

    // 手机验证码接口逻辑
    const data = await sendCode({phone: registerCurrent.phone, captcha: registerCurrent.captcha, type: 'register'})
    if (data.code === 0) {
        isDisable = true
        countDownFun()
        message.success('发送手机验证码成功')
    } else {
        resetCaptchaSrc()
    }
}

// 验证码倒计时的逻辑
let countDown = $ref(60)
let timer = $ref(null)
let isDisable = $ref(false)
const countDownFun = () => {
    timer = setInterval(() => {
        countDown--
        if (countDown <= 0) {
            clearInterval(timer)
            isDisable = false
            countDown = 60
        }
    }, 1000)
}


// 立即注册按钮
const onRegisterClick = async () => {
    if (!registerCurrent.code) {
        message.warn('请先发送手机验证码')
        return
    }

    if (!registerCurrent.accept) {
        message.warn('请先同意协议')
        return
    }

    /**
     * 请求接口逻辑
     */
    const data = await register({phone: registerCurrent.phone, code: registerCurrent.code})
    if (data.code === 0) {
        clearInfo()
        changeToFinish()
    } else {
        resetCaptchaSrc()
    }
}

// 注册按钮
const onFinish = () => {
    onRegisterClick()
}

// 重置表单数据
const clearInfo = () => {
    registerCurrent.code = '',
            registerCurrent.phone = '',
            registerCurrent.captcha = '',
            registerCurrent.accept = false
}

// 清除定时器
onBeforeUnmount(() => {
    clearInterval(timer)
})


</script>

<template>
    <div mt-20px>
        <a-form autocomplete="off" ref="formRef" :model="registerCurrent" @finish="onFinish">
            <a-form-item name="reg">
                <a-input placeholder="请输入手机号" v-model:value="registerCurrent.phone"/>
            </a-form-item>

            <!-- 图形验证码  -->
            <a-form-item name="regPCaptcha">
                <div flex>
                    <a-input placeholder="请输入图形验证码" autoComplete="false"
                             v-model:value="registerCurrent.captcha">
                        <template #suffix>
                            <reload-outlined mr-3px cursor-pointer @click="resetCaptchaSrc"/>
                        </template>
                    </a-input>
                    <div flex justify-center items-center>
                        <cdn-img w-80px h-30px :src="captchaSrc"/>
                    </div>
                </div>
            </a-form-item>

            <!-- 手机验证码  -->
            <a-form-item name="regCaptcha">
                <a-input placeholder="请输入手机号或邮箱验证码" v-model:value="registerCurrent.code">
                    <template #suffix>
                        <div>
                            <a-button type="link" size="small" p0 @click="getCode" :disabled="isDisable">
                                {{ isDisable ? `${countDown}秒后重发` : '获取验证码' }}
                            </a-button>
                        </div>
                    </template>
                </a-input>
            </a-form-item>

            <!-- 同意协议  -->
            <div flex items-center justify-between>
                <a-form-item name="-accept">
                    <a-checkbox v-model:checked="registerCurrent.accept">
                        <div flexc items-center text-13px>
                            <div>同意小滴课堂</div>
                            <a size="small" type="link" text-13px p0 m0 href="/agreementPage"
                               color="#169bd5">《隐私策略》</a>
                        </div>
                    </a-checkbox>
                </a-form-item>
            </div>

            <a-form-item>
                <button type="submit" btn center-text-36 w-300px rounded-full bg="#4d555d" text-white cursor-pointer>
                    立即注册
                </button>
            </a-form-item>
        </a-form>

        <!-- 微信注册登录方式 -->
        <Bottom></Bottom>
    </div>
</template>

<style lang="less" scoped>
:deep(.ant-form-item) {
    margin-bottom: 20px;
}
</style>
